.time_roller {

    .timeright>div,
    .timeleft>div {
        height: 60px;
        color: white;
        background: rgb(4, 58, 121);
        border-radius: 3px;
        margin: 10px;
        margin-bottom: 15px;
        padding: 0 0 0 35px;
        line-height: 60px;
        /* padding-left: 20px; */
        box-sizing: border-box;
        position: relative;
        cursor: pointer;
        animation: showIn 1.3s linear;
    }

    // .timeright>div {
    //     background: rgb(57, 143, 241);
    // }

    .timeright>div:hover,
    .timeleft>div:hover {
        background: rgb(6, 87, 180);
    }

    .timeright>div::before,
    .timeleft>div::before {
        content: '';
        position: absolute;
        top: 13px;
        width: 0px;
        height: 0px;
        border: 6px solid transparent;
    }

    .timeleft>div::before {
        right: -12px;
        border-left: 8px solid rgb(4, 58, 121);
    }

    .timeright>div::before {
        left: -12px;
        border-right: 8px solid rgb(4, 58, 121);
    }

    .timeright {
        position: relative;
        top: 25px;
    }

    // .timeleft>div:nth-of-type(1) {
    //     animation-duration: 0.2s;
    // }

    // .timeright>div:nth-of-type(1) {
    //     animation-duration: 0.4s;
    // }

    // .timeleft>div:nth-of-type(2) {
    //     animation-duration: 0.6s;
    // }

    // .timeright>div:nth-of-type(2) {
    //     animation-duration: 0.8s;
    // }

    // .timeleft>div:nth-of-type(3) {
    //     animation-duration: 1s;
    // }

    .timebox {
        width: 1px;
        height: 200px;
        background-color: #366595;
        margin: auto;
        position: relative;
        animation: heightSlide linear;

        .cicle {
            border-radius: 10px;
            list-style: none;
            width: 20px;
            height: 20px;
            border: 2px solid #cccccc;
            background: #ffff;
            left: -10px;
            position: absolute;
            animation: showIn 1s ease;
            box-sizing: border-box;
        }

        .cicle:nth-of-type(1) {
            top: 15px;
            animation-duration: 0.3s;
        }

        .cicle:nth-of-type(2) {
            top: 85px;
            animation-duration: 0.6s;
        }

        .cicle:nth-of-type(3) {
            top: 155px;
            animation-duration: 0.9s;
        }
    }





    @keyframes heightSlide {
        0% {
            height: 0;
        }

        100% {
            height: 200px;
        }
    }

    @keyframes showIn {

        0%,
        70% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }
}